<template>
	<view class="profile-container">
		<!-- 顶部用户信息 -->
		<view class="user-info-section">
			<view class="user-info-card">
				<image class="avatar" :src="userInfo.avatar || '/static/default-avatar.png'" mode="aspectFill"></image>
				<view class="user-details">
					<text class="username">{{userInfo.username || '用户昵称'}}</text>
				</view>
				<view class="edit-profile">
					<uni-icons type="right" size="16" color="#999"></uni-icons>
				</view>
			</view>
		</view>
		
		<!-- 菜单列表 -->
		<view class="menu-section">
			<view class="menu-item" @click="navigateTo('/pages/account/index')">
				<view class="menu-icon">
					<uni-icons type="wallet" size="22" color="#FFCB3C"></uni-icons>
				</view>
				<text class="menu-text">我的账户</text>
				<view class="menu-right">
					<uni-icons type="right" size="16" color="#CCCCCC"></uni-icons>
				</view>
			</view>
			
			<view class="menu-item" @click="navigateTo('/pages/merchant/index')">
				<view class="menu-icon">
					<uni-icons type="shop" size="22" color="#FFCB3C"></uni-icons>
				</view>
				<text class="menu-text">商户名称</text>
				<view class="menu-right">
					<text class="greeting">{{userInfo.name}}</text>
					<uni-icons type="right" size="16" color="#CCCCCC"></uni-icons>
				</view>
			</view>
			
			<view class="menu-item" @click="navigateTo('/person-pages/updatePwd/updatePwd')">
				<view class="menu-icon">
					<uni-icons type="locked" size="22" color="#FFCB3C"></uni-icons>
				</view>
				<text class="menu-text">修改密码</text>
				<view class="menu-right">
					<uni-icons type="right" size="16" color="#CCCCCC"></uni-icons>
				</view>
			</view>
		</view>
		
		
		<!-- 退出登录按钮 -->
		<view class="logout-section">
			<button class="logout-button" @click="logout">退出登录</button>
		</view>
	</view>
</template>

<script>
import {getCurrentUser} from '@/api/user.js'
export default {
	data() {
		return {
			userInfo: {
				username: '',
				avatar: ''
			}
		}
	},
	methods: {
		navigateTo(url) {
			uni.navigateTo({
				url: url
			});
		},
		// 获取当前用户信息
		async getUser(){
			let res = await getCurrentUser()
			this.userInfo = res.data
			console.log("用户信息",res);
		},
		
		logout() {
			uni.showModal({
				title: '提示',
				content: '确定要退出登录吗？',
				success: (res) => {
					if (res.confirm) {
						// 清除登录信息
						uni.removeStorageSync('token');
						uni.removeStorageSync('userInfo');		
						// 跳转到登录页
						uni.reLaunch({
							url: '/pages/login/index'
						});
					}
				}
			});
		}
	},
	onLoad() {
		this.getUser()
	}
}
</script>

<style lang="scss" scoped>
.profile-container {
	min-height: 100vh;
	background-color: #F5F5F5;
	padding-bottom: 30rpx;
}

.user-info-section {
	background: linear-gradient(to right, #FFD700, #FFC107);
	padding: 40rpx 30rpx 60rpx;
	position: relative;
}

.user-info-card {
	display: flex;
	align-items: center;
}

.avatar {
	width: 120rpx;
	height: 120rpx;
	border-radius: 60rpx;
	border: 4rpx solid #FFFFFF;
	background-color: #EEEEEE;
}

.user-details {
	margin-left: 20rpx;
	flex: 1;
}

.username {
	font-size: 36rpx;
	font-weight: bold;
	color: #FFFFFF;
	margin-bottom: 8rpx;
}

.user-id {
	font-size: 24rpx;
	color: rgba(255, 255, 255, 0.85);
}

.edit-profile {
	background-color: rgba(255, 255, 255, 0.3);
	width: 60rpx;
	height: 60rpx;
	border-radius: 30rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.card-section {
	margin: -40rpx 20rpx 20rpx;
	background-color: #FFFFFF;
	border-radius: 16rpx;
	padding: 30rpx;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
}

.section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30rpx;
}

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333333;
}

.view-all {
	display: flex;
	align-items: center;
}

.view-all-text {
	font-size: 24rpx;
	color: #999999;
	margin-right: 4rpx;
}

.order-icons {
	display: flex;
	justify-content: space-between;
}

.order-icon-item {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.icon-circle {
	width: 100rpx;
	height: 100rpx;
	border-radius: 50rpx;
	background-color: #FFF9E6;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16rpx;
}

.icon-text {
	font-size: 24rpx;
	color: #666666;
}

.menu-section {
	margin: 20rpx 20rpx;
	background-color: #FFFFFF;
	border-radius: 16rpx;
	overflow: hidden;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.03);
}

.menu-item {
	display: flex;
	align-items: center;
	padding: 30rpx;
	position: relative;
}

.menu-item:not(:last-child):after {
	content: '';
	position: absolute;
	left: 90rpx;
	right: 0;
	bottom: 0;
	height: 1rpx;
	background-color: #F5F5F5;
}

.menu-icon {
	margin-right: 20rpx;
}

.menu-text {
	flex: 1;
	font-size: 28rpx;
	color: #333333;
}

.menu-right {
	display: flex;
	align-items: center;
}

.greeting {
	font-size: 24rpx;
	color: #999999;
	margin-right: 10rpx;
}

.logout-section {
	margin: 60rpx 40rpx;
}

.logout-button {
	background-color: #FFFFFF;
	color: #FF6934;
	font-size: 32rpx;
	height: 90rpx;
	line-height: 90rpx;
	border-radius: 45rpx;
	font-weight: normal;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}
</style>